import React, { Component } from 'react'
import { Card, Form, Input, Checkbox, Button, message } from 'antd'
import style from './index.module.scss'
import logo from 'assets/logo.png'
import { loginAPI } from 'api/login.js'
import { savaToken } from 'utils/Token'

export default class Login extends Component {
    // 发送请求并且跳转页面
    onFinish = async (values) => {
        try {
            let res = await loginAPI(values)
            // 保存token
            // localStorage.setItem('geek-token', res.data.token)
            savaToken(res.data.token)
            // 跳转页面
            this.props.history.push("/")
            // 提示用户
            message.success('登录成功', 1)
        } catch (error) {
            message.error(error.response.data.message)
        }
    }
    render() {
        return (
            <div className={style.login}>
                <Card className="login-container">
                    <img className="login-logo" src={logo} alt="" />
                    {/* 输入框 */}
                    <Form onFinish={this.onFinish} size="large" name="basic" autoComplete="off" initialValues={{
                        mobile: "13911111111",
                        code: "246810"
                    }}>
                        <Form.Item
                            name="mobile"
                            rules={[
                                {
                                    required: true,
                                    message: '手机号码不能为空',
                                },
                                {
                                    message: '手机号码格式不正确',
                                    pattern:
                                        /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/,
                                },
                            ]}
                        >
                            <Input placeholder="用户名" />
                        </Form.Item>

                        <Form.Item
                            name="code"
                            rules={[
                                {
                                    required: true,
                                    message: '手机号码不能为空',
                                },
                                {
                                    pattern: /^\d{6}$/,
                                    message: '验证码格式不正确',
                                },
                            ]}
                        >
                            <Input placeholder="密码" />
                        </Form.Item>

                        <Form.Item name='agree' valuePropName='checked' rules={[
                            {
                                required: true,
                                message: '请先勾选协议',
                            },
                            {
                                validator: (_, value) => {
                                    return value ? Promise.resolve() : Promise.reject(new Error('请阅读并同意协议'))
                                }
                            }
                        ]}>
                            <Checkbox>我已阅读并同意[隐私条款]和[用户协议]</Checkbox>
                        </Form.Item>

                        <Form.Item >
                            <Button block type="primary" htmlType="submit">
                                登录
                            </Button>
                        </Form.Item>
                    </Form>
                </Card>
            </div >
        )
    }
}
